<template>
  <div class="newsinfo-container">
      <!-- 标题部分 -->
      <h2 class="title">{{newsinfo.title}}</h2>
      <!-- 副标题部分 -->
      <p class="subtitle">
          <span>发布时间:{{newsinfo.add_time}}</span>
          <span>浏览次数：{{newsinfo.click}}次</span>
      </p>
      <hr>
        <!-- 内容区域 -->
      <div class="content" v-html = "newsinfo.content"></div>
      <!-- 评论部分 -->
      <comment-box :id = "this.id"></comment-box>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import comment from '../subcomponents/comment.vue'
export default {
  data () {
    return {
      id: this.$route.params.id,
      newsinfo: []
    }
  },
  created () {
    this.getNewsInfo()
  },
  methods: {
    getNewsInfo () {
      this.$http.get('api/getnew/' + this.id).then(result => {
        if (result.body.status === 0) {
          this.newsinfo = result.body.message[0]
        } else {
          console.log('失败')
        }
      }
      )
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    'comment-box': comment
  }
}
</script>
<style lang="css" scoped>
.newsinfo-container{
    padding: 0 4px;
}
.newsinfo-container .title{
    font-size: 16px;
    color: red;
    text-align: center;
    margin: 15px 0;
}
.newsinfo-container .subtitle{
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}
</style>
